<template>
  <div class="about">
    <div>
      <h1>教师管理首页</h1>
      <div @click="gohome">教师管理列表</div>
      <div @click="zhongxin">个人中心</div>
    </div>
    <div>
    <!-- 获取头像有则是链接头像，无则是默认头像 -->
      <img src="../assets/生成默认头像.png" @click="open()" v-if="image==''">
      <img :src="image" @click="open()" v-if="image!=''">
      
      <span>用户名：{{ name }}</span>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      tishi:'',
      image:''
    }
  },
  methods: {
    //跳转到教师管理列表
    gohome() {
      this.$router.push('/about/home');
    },
    //跳转到个人中心
    zhongxin() {
      this.$router.push('/about/PersonalCenter');
    },
    //element弹框组件退出登录
    open() {
      this.$alert('确认退出登录？', '退出登录', {
        confirmButtonText: '确定',
        callback: action => {
          if (action == 'confirm') {
            this.$router.push('/')
            localStorage.removeItem('succeed')

            this.tishi = '退出成功'
          }else if(action == 'cancel'){
            this.tishi = '取消退出'
          }
          
          
          this.$message({
            type: 'info',
            message: `提示: ${this.tishi}`
          });
        }
      });
    }
  },
  components: {

  },
  created() {
    //获取用户名
    this.name = JSON.parse(localStorage.getItem('Account')).username
    //获取头像有则是链接头像，无则是默认头像
    if(JSON.parse(localStorage.getItem('Teacher')).image){
      this.image = JSON.parse(localStorage.getItem('Teacher')).image
    }
  },
  computed:{

  },
  watch: {

  }
}
</script>

<style less>
.about {
  width: 100%;
  height: 100vh;
  background-color: rgb(245, 245, 245);

  >div:nth-of-type(1) {
    width: 10vw;
    height: 100vh;
    background-color: rgb(238, 218, 176);

    >h1 {
      width: 100%;
      height: 10vh;
      background-color: rgb(223, 177, 122);
      text-align: center;
      line-height: 10vh;
      /* color: white; */
      font-weight: 600;
    }

    >div {
      width: 100%;
      height: 8vh;
      text-align: center;
      line-height: 8vh;
      font-size: 16px;
      /* color: white; */
      cursor: pointer;
    }
  }

  >div:nth-of-type(2) {
    width: calc(100vw - 10vw);
    background-color: rgb(238, 218, 176);
    height: 10vh;
    position: fixed;
    top: 0px;
    left: 10vw;

    img {
      float: right;
      height: 80%;
      margin-right: 80px;
      margin-top: 6px;
      border-radius: 50%;
      cursor: pointer;
    }

    span {
      float: right;
      line-height: 10vh;
      margin-right: 10px;
      font-size: 16px;
    }
  }
}
</style>
